<template>
  <div style='margin-left: 20px;width:790px;height: 300px'>
    <!-- 分页 -->
    <div class='tab_company_out'>
      <div style='float: right;margin-right: 20px'>No:{{ tableData.paymentNo }}</div>
      <div class='title'>{{ tableData.companyName }}<span style='padding-left: 10px;font-size: 10px;'>资金支付审批单</span></div>
      <div class='dan'><span></span></div>
      <div style='width:790px;height: 20px;margin-top: 5px'>
         <span class='left' style='float:left;width:420px;text-align:left'>
            <span>申请日期: {{ tableData.amountDate }}</span>
          </span>
        <span class='right' style='float:right;text-align:right;font-size: 9px'>打印日期: {{ tableData.createTime }}</span>
      </div>
      <table cellpadding='0' cellspacing='0' style='width:790px;float: left;margin-bottom: 8px'>
        <tr>
          <td class='label' width='10%'>付款单位</td>
          <td class='value' colspan='7'>{{ tableData.companyName }}</td>
        </tr>
       
        <tr>
          <td class='label' width='10%'>收款单位</td>
          <td width='55%' class='value' colspan='4'>{{ tableData.payeeName }}</td>
          <td width='55%' class='value' colspan='3'>{{ tableData.businessNo }}</td>
        </tr>
        <tr>
          <td class='label'>付款事项</td>
          <td colspan='7' class='value'>{{ tableData.title }}</td>
        </tr>
        <tr>
          <td class='label'>开户银行</td>
          <td class='value' colspan='3'>{{ tableData.bankName }}</td>
          <td class='label'>账号</td>
          <td class='value' colspan='3'>{{ tableData.bankNo }}</td>
        </tr>
        <tr>
          <td class='label'>申请金额</td>
          <td class='value' colspan='7'>{{ chineseTotal }} ¥{{ tableData.amount }}</td>
        </tr>
        <tr>
          <td class='label'>备注</td>
          <td colspan='7' class='value'>{{ tableData.remark }}</td>
        </tr>
        <tr>
          <td class='label'>申请人</td>
          <td class='value'>{{ tableData.nickName }}</td>
          <td class='label'>销售部长</td>
          <td class='value'>{{ tableData.nickName_xsfhy }}</td>
          <td class='label'>复核员</td>
          <td class='value'>{{ tableData.nickName_swfhy }}</td>
          <td class='label'>市场组长</td>
          <td class='value'>{{ tableData.nickName_swsczz }}</td>
         
        </tr>
        <tr>
          <td class='label'>财务结算员</td>
          <td class='value'>{{ tableData.nickName_jsy }}</td>
          <td class='label'>财务复核员</td>
          <td class='value'>{{ tableData.nickName_fhy }}</td>
          <td class='label'>结算部长</td>
          <td class='value'>{{ tableData.nickName_jsbz }}</td>
          <td class='label'>财务部长</td>
          <td class='value'>{{ tableData.nickName_cwbz }}</td>
<!--          <td class='label'>出纳</td>
          <td class='value'>{{ tableData.nickName_cn }}</td>-->
        </tr>
      </table>
    </div>
  </div>
</template>


<script>
export default {
  name: "SettlePayPrint",
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {
      type: Object,
      default() {
        return {
          paymentNo: "",
          deptName: "",
          amountDate: "",
          amount: 0
        }
      }
    },

    // 每页多少行
    onePageRow: {
      type: Number,
      default: 5
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },

    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {}
  },

  computed: {

    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null ? this.getChineseNumber(this.tableData.amount) : "您还没有传入getChineseNumber"
    }
  },

  methods: {
    test() {
      console.log("test")
    }
  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  font-color: #000000;
  color: #000000;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 14px;
}

@page {
  size: auto;
  margin: 1mm;
}

.text {
  float: right;
  letter-spacing: 1px;
  font-size: 7px;
  width: 12px;
}

.tab_company_out {
  text-align: center;
  width: 790px;
  page-break-after: always;
}

.value {
  text-align: left;
  width: 100px;
  padding-left: 10px;
}

.title {
  font-size: 17px;
  padding-left: 16%;
  font-weight: bold;
}

.dan {
  text-align: center;
  position: relative;
}


.dan span {
  position: absolute;
  right: 0;
}

p {
  overflow: hidden;
  padding: 10px 0;
}


p span ins {
  text-decoration: underline;
}

table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  height: 28px;
  text-align: center;
  line-height: 28px;
}

table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;

}

table tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
}

table tr th:nth-child(2) {
  width: 0;
}

.lu {
  padding-left: 10px;
}

.lu li {
  float: left;
  text-align: left;

  width: calc(765px / 5);

}

.lu li label {
  width: 70px;
  display: inline-block;
}


/*.lu li:last-of-type {*/
/*margin-right: 20px;*/
/*float: right;*/
/*text-align: left;*/
/*}*/


</style>